import { Row, Col, Space, Radio, Button, Form, message } from 'antd';
import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import CommonInput from '@/pages/OrderModule/common/components/CommonInput';
import Typography from '@/pages/OrderModule/common/components/Typography';
import IconFont from '@/components/IconFont';
import Style from './index.module.less';
import {CommonText} from '@/pages/OrderModule/common/components/CommonText/index.jsx';
import { updateRemarkInfo } from '../../service'
import { isEqual } from 'lodash'

const Memo = (props) => {
  const { initValues, orderId } = props;
  const [form] = Form.useForm();

  return (
    <div className={Style.meno_group}>
      <CommonForm
        formProps={{
          form,
          onFinish: (data) => {
            const labelIds = (initValues.labelIds || []).map(item => item.labelId);
            updateRemarkInfo({ ...data, id: orderId, labelIds }).then(res => {
              if (res.code === 200) {
                message.success('更改成功')
                props.handleOk?.();
              }
            })
          },
          initialValues: {
            ...initValues,
            labelIds: (initValues.labelIds || []).map(item => item.labelId)
          },
        }}
        columns={[
          {
            block: (
              <>
                <Row gutter={[16, 16]}>
                  <Col span={24}>
                    <Form.Item name="flag">
                      <Radio.Group>
                        <Space>
                          <Typography>旗帜：</Typography>
                          <Space size="large">
                            <Radio value={1}>
                              <IconFont type="iconqizhihong" />
                            </Radio>
                            <Radio value={2}>
                              <IconFont type="iconqizhihuang" />
                            </Radio>
                            <Radio value={3}>
                              <IconFont type="iconqizhilv" />
                            </Radio>
                            <Radio value={4}>
                              <IconFont type="iconqizhilan" />
                            </Radio>
                            <Radio value={5}>
                              <IconFont type="iconqizhizi" />
                            </Radio>
                            <Radio value={0}>
                               无旗帜
                            </Radio>
                          </Space>
                        </Space>
                      </Radio.Group>
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={[16, 16]} style={{marginBottom: 20}}>
                  <Col span={2}>
                    <Typography className={Style.label}>买家留言：</Typography>
                  </Col>
                  <Col span={20} >
                    <CommonText style={{lineHeight: '32px'}} text={initValues.buyerMessage}></CommonText>
                  </Col>
                </Row>
                <Row gutter={[16, 16]}>
                  <Col span={2}>
                    <Typography className={Style.label}>卖家备注：</Typography>
                  </Col>
                  <Col span={20}>
                    <Form.Item name="sellerRemark">
                      <CommonInput placeholder="请输入卖家备注" ></CommonInput>
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={[16, 16]}>
                  <Col span={2}>
                    <Typography className={Style.label}>订单备注：</Typography>
                  </Col>
                  <Col span={20}>
                    <Form.Item name="orderRemark">
                      <CommonInput placeholder="请输入订单备注" ></CommonInput>
                    </Form.Item>
                  </Col>
                </Row>
                {/* <Row gutter={[16, 16]}>
                  <Col span={2}>
                    <Typography className={Style.label}>订单标签：</Typography>
                  </Col>
                  <Col span={20}>
                    <Form.Item name="labelIds">
                      <Space>
                          {currentTagList.map(item => {
                            return (labelNameMap[item.labelId] ? (
                              <span key={item.labelId} style={{fontSize: 20}}>
                                <IconFont type={labelIconMap[item.labelId]} />
                              </span>
                            ) : (
                              <Tag key={item.labelId} color="#B1B7C3">
                                {item.labelName}
                              </Tag>
                            ))
                          })}
                          <SelectTagModal defaultValue={currentTagList.map(item => item.labelId)} onChange={(data) => {
                            form.setFieldValue('labelIds', data.map(item => item.labelId));
                            setCurrentTagList(data)
                          }}>
                            <Button type="link">
                              <IconFont type="icona-lujing1" />
                              添加标签
                            </Button>
                          </SelectTagModal>
                      </Space>
                    </Form.Item>
                  </Col>
                </Row> */}
                <Row gutter={[16, 16]}>
                  <Col span={2}></Col>
                  <Col span={20}>
                    <Button type="primary" htmlType="submit">保存</Button>
                  </Col>
                </Row>
              </>
            ),
          },
        ]}
      ></CommonForm>
    </div>
  );
};

export default Memo;
